<template>
  <!-- 业务综合得分表 -->
  <el-row class="rightWrap">
    <el-row class="mosWrap">
      <el-row class="title">
        {{ $store.getters.getLocation }}业务综合得分表
      </el-row>
      <div style="display: flex;flex-direction: column;height:calc(40vh - 90px)">
        <el-row
            v-for="(city, index) in scoreDataList"
            :key="index" type="flex"
            :class="index%2 !== 0 ? 'dark' : ''"
            class="tableBody"
        >
          <div class="tableName">
            <div class="circle" :style="{ backgroundColor: getColor(city.score) }">{{ index + 1 }}</div>
          </div>
          <div class="tableName" :style="{ color: getColor(city.value) }">{{ city.type }}</div>
          <div class="tableName" :style="{ color: getColor(city.value) }">{{ city.score }}</div>
        </el-row>
      </div>
    </el-row>
    <el-row style="text-align:right;height: 24px;line-height: 24px;color:#eeeeee;font-size: 14px;font-style: italic">
      *业务综合评分, 更新至{{`${new Date().getFullYear()}年${new Date().getMonth() + 1}月${new Date().getDate()}日`}}
    </el-row>
  </el-row>
</template>

<script>
export default {
  name: "ThreeRightTwo",
  props: {
    scoreDataList: {
      type: Array,
      default: ()=>[]
    }
  },
  data() {
    return {
    }
  },
  methods: {
    getColor(val) {
      if (val <= 30) {
        return 'rgba(255,26,26,1)'
      } else if (val >30 && val <=60) {
        return 'rgba(255,135,31,1)'
      } else if (val > 60) {
        return 'rgba(177,237,80,1)'
      } else {
        return ''
      }
    }
  }
}
</script>

<style scoped>
.rightWrap{
  height: 31vh;
  background: rgba(0,33,135,0.24);
  border: 1px solid rgba(14,101,187,0.66);
  box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-content: space-between;
}
.mosWrap{
  border-radius: 5px;
  background: rgba(24,66,107,0.59);
  box-shadow: 0px 1px 4px 0px rgba(20,46,110,0.1);
  height:calc(31vh - 50px)
}
.title{
  color: #FFFFFF;
  font-size: 18px;
  line-height: 18px;
  text-align: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(64,169,255,0.5);
}
.tableName{
  display: flex;
  flex: 1;
  justify-content: center;
  font-family: Microsoft Sans Serif;
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  vertical-align: middle;
}
.tableBody{
  flex: 1;
  align-items: center;
  padding: 0px 30px 0 0;
  color: #ffffff;
  max-height: 40px;
  /*line-height: 50px;*/
}
.circle{
  width: 20px;
  height: 20px;
  background: rgb(0, 128, 255);
  border-radius: 50%;
  line-height: 20px;
}
.dark{
  background: rgba(24,66,107,0.7)
}
</style>
